<template>
    <el-aside width="200px">
        <el-menu default-active="1" class="el-menu1" @open="handleOpen" @close="handleClose"
            background-color='#e5e5e5'>
            <el-menu-item v-for="item in noChildren" :key="item.path" @click="handleMenuClick(item.path)">
                <el-icon>
                    <setting />
                </el-icon>
                <span>{{ item.label }}</span>
            </el-menu-item>

            <el-sub-menu v-for="item in hasChildren" :key="item.path">
                <template #title>
                    <el-icon>
                        <location />
                    </el-icon>
                    <span>{{ item.label }}</span>
                </template>
                <el-menu-item-group v-for="subItem in item.children" :key="subItem.path">
                    <el-menu-item @click="handleMenuClick(subItem.path)">{{ subItem.label }}</el-menu-item>
                </el-menu-item-group>
            </el-sub-menu>
        </el-menu>
    </el-aside>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const menuList = ref([
    {
        label: '首页',
        icon: 'el-icon-user-solid',
        path: '/home'
    },
    {
        label: '腾讯地图',
        icon: 'el-icon-user-solid',
        path: '/lbs'
    },
    {
        label: 'Tres.js',
        icon: 'el-icon-user-solid',
        path: '/tres'
    },
    {
        label: 'Three.js',
        icon: 'el-icon-s-goods',
        children: [
            {
                label: '房间',
                path: '/room',
                url: 'room'
            },
            {
                label: '水波纹建筑',
                path: '/water-build',
                url: 'water-build'
            },
            {
                label: '建筑',
                path: '/build',
                url: 'build'
            }, {
                label: '建筑(新)',
                path: '/new-build',
                url: 'new-build'
            },
            {
                label: '人物',
                path: '/person',
                url: 'person'
            },
            {
                label: '卡通',
                path: '/cartoon',
                url:'cartoon'
            },
            {
                label: 'demo',
                path: '/demo',
                url: 'demo'
            },
            {
                label: 'chair',
                path: '/chair',
                url: 'chair'
            },
        ]
    },
])
const hasChildren = computed(() => menuList.value.filter(item => item.children))
const noChildren = computed(() => menuList.value.filter(item => !item.children))

function handleMenuClick(path) {
    router.push(path)
}
</script>

<style lang="scss" scoped>
.el-aside {
    background-color: #e5e5e5;
} 
.el-menu {
    --el-menu-active-color: red;
}
</style>
